<!--
 * @Description: 统计数值组件
-->

<template>
  <div class="my-statistic">
    <div class="my-statistic-title">
      {{ title }}
      <el-tooltip v-if="tips" effect="light">
        <template #content>
          <div style="width: 200px; line-height: 2">
            {{ tips }}
          </div>
        </template>
        <el-icon class="my-statistic-tips"><el-icon-question-filled /></el-icon>
      </el-tooltip>
    </div>
    <div class="my-statistic-content">
      <span v-if="prefix" class="my-statistic-content-prefix">{{ prefix }}</span>
      <span class="my-statistic-content-value">{{ cmtValue }}</span>
      <span v-if="suffix" class="my-statistic-content-suffix">{{ suffix }}</span>
    </div>
    <div v-if="description || $slots.default" class="my-statistic-description">
      <slot>
        {{ description }}
      </slot>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { groupSeparator } from '@/utils/tools'

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  value: {
    type: String,
    value: ''
  },
  prefix: {
    type: String,
    value: ''
  },
  suffix: {
    type: String,
    value: ''
  },
  description: {
    type: String,
    value: ''
  },
  tips: {
    type: String,
    value: ''
  },
  groupSeparator: {
    type: Boolean,
    value: false
  }
})

const cmtValue = computed(() => {
  return props.groupSeparator ? groupSeparator(props.value ?? '') : props.value
})
</script>

<style lang="scss" scoped>
.my-statistic-title {
  font-size: 12px;
  color: #999;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}
.my-statistic-tips {
  margin-left: 5px;
}
.my-statistic-content {
  font-size: 20px;
  color: #333;
}
.my-statistic-content-value {
  font-weight: bold;
}
.my-statistic-content-prefix {
  margin-right: 5px;
}
.my-statistic-content-suffix {
  margin-left: 5px;
  font-size: 12px;
}
.my-statistic-description {
  margin-top: 10px;
  color: #999;
}
.dark {
  .my-statistic-content {
    color: #d0d0d0;
  }
}
</style>
